<template>
  <div ref="homePage" class="home-page">
    <div class="page-background">
      <div class="back"></div>
    </div>
    <div class="page-container">
      <div class="page-header">
        <span class="add-btn" @click="setShowAdd">
          <var-icon size="35" name="plus" color="rgb(97,99, 234)" />
        </span>
        <!-- <div class="time">
          <span class="time-container">
            2023.03
          </span>
        </div>-->
      </div>
      <div class="state-box">
        <div class="state-container">
          <div class="state-item">
            <div class="icon">
              <img src="@/assets/month.png" alt />
            </div>
            <div class="context">
              <span class="count">{{ state.monthTime }}</span>
              <span class="title">您本月的学习时间（小时）</span>
            </div>
          </div>
          <div class="state-item">
            <div class="icon">
              <img src="@/assets/365.png" alt />
            </div>
            <div class="context">
              <span class="count">{{ state.yearTime }}</span>
              <span class="title">您今年的学习时间（小时）</span>
            </div>
          </div>
          <div class="state-item">
            <div class="icon">
              <img src="@/assets/book.png" alt />
            </div>
            <div class="context">
              <span class="count">{{ classCount }}</span>
              <span class="title">您的课程数量</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 提示 您当前有项打卡正在进行中 -->
      <!-- <div class="tips">
        <var-chip size="small" type="info">
          <template #left>
            <var-icon size="16" name="bell" />
          </template>
          您当前有项打卡正在记录中，可点击查看
        </var-chip>
      </div> -->

      <!-- 社区块 -->
      <div class="community"></div>
    </div>
    <AddRecord v-if="showAdd" @setShowAdd="setShowAdd" :getTimeMonth="getTimeMonth" :getTimeYear="getTimeYear" />
  </div>
</template>

<script>
import { getClassList, TimeCountAPI } from "@/api";
import AddRecord from "@/components/AddRecord.vue";
import { router } from "@/router";
import { ref, reactive, computed, onMounted } from "vue";
import { useStore } from "vuex";
import dayjs from "dayjs"
// import { getSystemBarHeight, setPageTopBarHeight } from "@/util/uni-5+app.utils";
// import setBarColor from "@/util/setBarColor";
export default {
  name: "HomeView",
  components: {
    AddRecord
  },
  setup() {
    const homePage = ref()
    const store = useStore();
    const state = reactive({
      yearTime: 0,
      monthTime: 0
    });
    const showAdd = ref(false);
    const setShowAdd = () => {
      // 先判断用户有没有登录，没有登录要求先登录
      const token = store.state.token;
      if (!token) {
        console.log("还没有登录");
        router.push({ name: "login" });
        return;
      }
      showAdd.value = !showAdd.value;
    };

    // 计算学习时间多长 年
    const getTimeYear = async () => {
      TimeCountAPI({
        url: "/home-api/getTimeCount",
        params: {
          userId: store.state.userInfo.userId,
          startTime: dayjs().startOf('year').valueOf(),
          endTime: dayjs().endOf('year').valueOf()
        },
        success: data => {
          const { total } = data;
          // 时间戳 毫秒换算成小时 保留2位小数

          state.yearTime = (total / (1 * 60 * 60 * 1000)).toFixed(2);
        },
        error: () => { },
        complete: () => { }
      });
    };

    // 计算学习时长 月
    const getTimeMonth = async () => {
      console.log("按月查询");
      const last = 30
      const params = {
        userId: store.state.userInfo.userId,
        // startTime: `${new Date().getFullYear()}-${new Date().getMonth() +
        //   1}-01 00:00:00`,
        // endTime: `${new Date().getFullYear()}-${new Date().getMonth() +
        //   1}-${last} 23:59:59`
        startTime: dayjs().startOf('month').valueOf(),
        endTime: dayjs().endOf('month').valueOf()
      };
      TimeCountAPI({
        url: "/home-api/getTimeCount",
        params,
        success: data => {
          const { total } = data;
          // 时间戳 毫秒换算成小时 保留2位小数
          state.monthTime = (total / (1 * 60 * 60 * 1000)).toFixed(2);
        },
        error: () => { },
        complete: () => { }
      });
    };

    const getClassCount = () => {
      console.log("onMounted函数");
      getClassList({
        params: {
          userId: store.state.userInfo.userId
        },
        success: data => {
          const { total } = data;
          console.log("获取课程数量：", total);
          store.dispatch("setClassCount", total);
        },
        error: () => { },
        complete: () => { }
      });
    };
    onMounted(() => {

      getClassCount();
      getTimeYear();
      getTimeMonth();
      // setBarColor("#6163ea");//5+app设置任务栏背景色
    });

    return {
      homePage,
      state,
      classCount: computed(() => store.getters.classCount),
      token: computed(() => store.state.token),
      showAdd,
      setShowAdd,
      getTimeYear,
      getTimeMonth
    };
  }
};
</script>
<style lang="scss" scoped>
.home-page {
  width: 100%;
  height: 100%;

  padding-top: 40px;

  .page-background {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .back {
      height: 200px;
      width: 100%;
      border-radius: 0 0 25px 25px;
      background-color: #6163ea
    }
  }

  .page-container {
    padding: 20px;

    .page-header {
      height: 50px;
      display: flex;
      justify-content: flex-end;

      .add-btn {
        display: inline-block;
        width: 35px;
        height: 35px;
        border-radius: 50px;
        background-color: #fdc528;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .state-box {
      width: 100%;
      // height: 200px;
      background-color: white;
      border-radius: 15px;
      padding: 3px 0;

      .state-container {
        width: 100%;
        height: 100%;
        padding: 10px;

        .state-item {
          width: 100%;
          // height: 30px;
          display: flex;
          align-items: center;
          padding: 5px 0;
          border-bottom: 1px solid rgb(250, 250, 250);

          .icon {
            width: 40px;
            height: 40px;
            margin: 0 20px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .context {
            display: flex;
            flex-direction: column;

            .count {
              font-size: 18px;
              color: rgb(70, 70, 70);
              padding: 3px 0;
            }

            .title {
              font-size: 14px;
              color: rgb(106, 106, 106);
              padding: 3px 0;
            }
          }
        }
      }
    }

    .tips {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 5px 0;
    }
  }
}
</style>